<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <!-- HTTP 请求参数 -->
  <div style="border: 1px #dcdfe6 solid" v-if="!loading">
    <el-tabs v-model="activeName" class="request-tabs">
      <!-- 请求头-->
      <el-tab-pane :label="$t('api_test.request.headers')" name="headers" v-if="request.header">
        <ms-api-key-value-detail :items="request.header" :showDesc="true" :format="request.headerId" />
      </el-tab-pane>
      <el-tab-pane :label="$t('api_test.definition.request.status_code')" name="statusCode" v-if="request.statusCode">
        <ms-api-key-value-detail :items="request.statusCode" :showDesc="true" :format="request.headerId" />
      </el-tab-pane>
      <!--query 参数-->
      <el-tab-pane :label="$t('api_test.definition.request.query_param')" name="parameters" v-if="request.query">
        <ms-api-key-value-detail
          :show-required="true"
          :items="request.query"
          :showDesc="true"
          :format="request.headerId" />
      </el-tab-pane>

      <!--REST 参数-->
      <el-tab-pane :label="$t('api_test.definition.request.rest_param')" name="rest" v-if="request.rest">
        <ms-api-key-value-detail
          :show-required="true"
          :items="request.rest"
          :showDesc="true"
          :format="request.headerId" />
      </el-tab-pane>

      <!--请求体-->
      <el-tab-pane
        :label="$t('api_test.request.body')"
        name="body"
        v-if="
          request.body && (request.body.form || request.body.jsonSchema || request.body.raw_1 || request.body.raw_2)
        ">
        <el-radio-group v-model="activeBody" size="mini">
          <el-radio-button label="json" v-if="request.body.jsonSchema" />
          <el-radio-button label="raw" v-if="request.body.raw_1 || request.body.raw_2" />
          <el-radio-button label="form-data" v-if="request.body.form" />
        </el-radio-group>
        <ms-json-code-edit :body="request.body" ref="jsonCodeEdit" v-if="activeBody === 'json'" />
        <pre v-html="getDiff(request.body.raw_2, request.body.raw_1)" v-if="activeBody === 'raw'"></pre>
        <ms-api-key-value-detail
          :show-required="true"
          :items="request.body.form"
          :showDesc="true"
          :format="request.headerId"
          v-if="activeBody === 'form-data'" />
      </el-tab-pane>

      <!--认证配置 -->
      <el-tab-pane :label="$t('api_test.definition.request.auth_config')" name="authConfig" v-if="request.body_auth">
        <el-table :data="request.body_auth">
          <el-table-column prop="columnTitle" :label="$t('operating_log.change_field')" />
          <el-table-column prop="originalValue" :label="$t('operating_log.before_change')">
            <template v-slot:default="scope">
              <el-tooltip :content="scope.row.originalValue">
                <div class="current-value ms-tag-del">
                  {{ scope.row.originalValue }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="newValue" :label="$t('operating_log.after_change')">
            <template v-slot:default="scope">
              <el-tooltip :content="scope.row.newValue">
                <div class="current-value ms-tag-add">
                  {{ scope.row.newValue }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane
        :label="$t('api_test.definition.request.other_config')"
        name="advancedConfig"
        v-if="request.body_config">
        <el-table :data="request.body_config">
          <el-table-column prop="columnTitle" :label="$t('operating_log.change_field')" />
          <el-table-column prop="originalValue" :label="$t('operating_log.before_change')">
            <template v-slot:default="scope">
              <el-tooltip :content="scope.row.originalValue">
                <div class="current-value ms-tag-del">
                  {{ scope.row.originalValue }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="newValue" :label="$t('operating_log.after_change')">
            <template v-slot:default="scope">
              <el-tooltip :content="scope.row.newValue">
                <div class="current-value ms-tag-add">
                  {{ scope.row.newValue }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MsJsonCodeEdit from './json-view/ComparedEditor';
import MsApiKeyValueDetail from './common/ApiKeyValueDetail';

const jsondiffpatch = require('jsondiffpatch');
const formattersHtml = jsondiffpatch.formatters.html;

export default {
  name: 'MsApiHttpRequestParams',
  components: { MsJsonCodeEdit, MsApiKeyValueDetail },
  props: {
    method: String,
    request: {},
    type: String,
  },
  data() {
    return {
      activeName: '',
      activeBody: '',
      loading: false,
    };
  },
  created() {
    this.active();
  },
  watch: {
    'request.headerId'() {
      this.active();
    },
  },
  methods: {
    active() {
      if (this.request.header) {
        this.activeName = 'headers';
      } else if (this.request.query) {
        this.activeName = 'parameters';
      } else if (this.request.rest) {
        this.activeName = 'rest';
      } else if (
        this.request.body &&
        (this.request.body.jsonSchema || this.request.body.form || this.request.body.raw_1 || this.request.body.raw_2)
      ) {
        this.activeName = 'body';
        if (this.request.body.jsonSchema) {
          this.activeBody = 'json';
        }
        if (this.request.body.form) {
          this.activeBody = 'form-data';
        }
        if (this.request.body.raw_1 || this.request.body.raw_2) {
          this.activeBody = 'raw';
        }
      } else if (this.request.body_config) {
        this.activeName = 'advancedConfig';
      } else if (this.request.body_auth) {
        this.activeName = 'authConfig';
      } else if (this.request.statusCode) {
        this.activeName = 'statusCode';
      }
      if (
        this.request.body &&
        (this.request.body.jsonSchema || this.request.body.form || this.request.body.raw_1 || this.request.body.raw_2)
      ) {
        if (this.request.body.jsonSchema) {
          this.activeBody = 'json';
        }
        if (this.request.body.form) {
          this.activeBody = 'form-data';
        }
        if (this.request.body.raw_1 || this.request.body.raw_2) {
          this.activeBody = 'raw';
        }
      }
      this.reloadCodeEdit();
    },
    getDiff(v1, v2) {
      let delta = jsondiffpatch.diff(v1, v2);
      return formattersHtml.format(delta, v1);
    },
    reloadCodeEdit() {
      this.loading = true;
      this.$nextTick(() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.ms-query {
  background: #783887;
  color: white;
  height: 18px;
  border-radius: 42%;
}

.ms-header {
  background: #783887;
  color: white;
  height: 18px;
  border-radius: 42%;
}

.request-tabs {
  margin: 10px;
  min-height: 200px;
}

.ms-el-link {
  float: right;
  margin-right: 45px;
}

.current-value {
  display: inline-block;
  overflow-x: hidden;
  padding-bottom: 0;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  width: 120px;
}

.ms-tag-del {
  text-decoration: line-through;
  text-decoration-color: red;
  -moz-text-decoration-line: line-through;
  background: #f3e6e7;
}

.ms-tag-add {
  background: #e2ecdc;
}

@import '~jsondiffpatch/dist/formatters-styles/html.css';
@import '~jsondiffpatch/dist/formatters-styles/annotated.css';
</style>
